<template>
	<view class="wrapper">
		<!-- 抢单 -->
		<!-- 	<u-modal :show="showGrabbing" :title="'抢单确认'" showCancelButton confirmColor='#bd3124' cancelText='不了'
			confirmText='确认抢单' @confirm='confirmGrab' @cancel='showGrabbing=false'>
			<view class="slot_content">
				抢单后请及时 <text style="color:#bd3124">和房东确认租金和门牌号</text>是否抢单?
			</view>
		</u-modal> -->
		<u-popup :show="showGrabbing" mode="center" :round="10" @close="showGrabbing = false">
			<view class="popup">
				<view class="title">
					抢单确认
				</view>
				<view class="cue">
					抢单后请及时 <text style="color:#bd3124">和房东确认租金和门牌号</text><br />是否抢单?
				</view>
				<view class="button_box">
					<u-button @click="showGrabbing = false" class="sure">不了</u-button>
					<u-button color='#f56e3d' @click="confirmGrab">确认抢单</u-button>
				</view>
			</view>
		</u-popup>
		<view class="g_search_wrapper">
			<view class="search" style="display: flex;">
				<u-search placeholder="房东名称/小区名称/门牌号" :showAction="false" size="small" @change="initSearch()"
					v-model="searchParams.searchValue"></u-search>
			</view>
			<view class="select_all">
				<uni-data-select v-model="searchParams.sortType" :localdata="timeData"
					@change="initSearch()"></uni-data-select>
				<view class="space">

				</view>
				<uni-data-select v-model="searchParams.landlordType" :localdata="typeList"
					@change="initSearch()"></uni-data-select>
				<view class="end">

				</view>
			</view>
		</view>
		<view class="page_wrapper">
			<view v-for="(item, index) in pageList" :key="index">
				<view @click.native="gotoDetails" class="item">
					<view class="top">
						<view style="width: 70%">
							<u--text :text="item.houseName" size="14" lineHeight="28" bold lines='1'></u--text>
						</view>
						<view class='top_right'>
							<u-tag :text="item.ascription=='1'?'二房东':'个人'" size="mini" color="#fff" bgColor="#f5a081"
								shape="circle" borderColor='transparent' style="margin-right: 10rpx;"></u-tag>
							<u--text :text="item.timeAway" size="12" lineHeight="28" color="#999"></u--text>
						</view>
					</view>

					<view class="mid">
						<view class="mid_left">
							<view class="mid_left_1">
								<u-icon size="18" name="map" color="#c3c3c3"></u-icon>
								<view style="margin-right: 10rpx;">
									<u--text :text="item.locationAddress" size="13" lineHeight="28"
										color="#999">{{item.locationAddress}}</u--text>
								</view>
								<u--text :text="item.distance" size="10" lineHeight="28" color="#b6b6b6"></u--text>
							</view>
							<view class="">
								<u--text :text=" '￥'+ item.rent + '元/月'" size="14" lineHeight="28" bold></u--text>
								<!-- 						<u-tag text="单量宝机构" size="mini" type="info" color="#fff" bgColor="#f56e3d"
										borderColor='transparent'></u-tag>
									<u-tag text="好评" size="mini" type="info" color="#fff" bgColor="#f56e3d"
										borderColor='transparent'></u-tag> -->
							</view>
							<view class="" >
								<u--text :text=" item.remark" size="14" color="#FF3333" lineHeight="28" bold></u--text>
							</view>
						</view>
						<view class="right" @click.stop>
							<u-button shape='circle' @click="grabbingClick(item)"
								color='linear-gradient(#ffbf6b,#ffc88a,#fffaf9)'
								:customStyle="{width:'80rpx',height:'80rpx',color:'#000',border:'#999 solid 1rpx'}">抢</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="padding: 40rpx 0;">
				<u-loadmore :status="status" />
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		survey
	} from '@/api/survey/index.js'
	export default {
		data() {
			return {
				time: '',
				type: '',
				timeData: [{
						value: '',
						text: "全部",
					},
					{
						value: '1',
						text: "按时间排序",
					},
					{
						value: '2',
						text: "按距离排序",
					},
				],
				typeList: [{
						value: '',
						text: "全部",
					},
					{
						value: '1',
						text: "业主房源",
					},
					{
						value: '2',
						text: "二房东房源",
					},
				],
				pageList: [
					// {
					//    houseName: '房源名称',
					//    ascription: '2',
					//    timeAway: '8分钟前',
					//    locationAddress:'经纬度',
					//    distance: '距离',
					//    rent: 800
					// },
					// {
					//    houseName: '房源名称',
					//    ascription: '2',
					//    timeAway: '哈哈',
					//    locationAddress:'经纬度',
					//    distance: '距离',
					//    rent: 800
					// },
					// {
					//    houseName: '房源名称',
					//    ascription: '2',
					//    timeAway: '哈哈',
					//    locationAddress:'经纬度',
					//    distance: '距离',
					//    rent: 800
					// },
					// {
					//    houseName: '房源名称',
					//    ascription: '2',
					//    timeAway: '哈哈',
					//    locationAddress:'经纬度',
					//    distance: '距离',
					//    rent: 800
					// },
				],
				showGrabbing: false,
				// 参数
				searchParams: {
					lng: '121.122162',
					lat: '31.289757',
					sortType: '',
					landlordType: '',
					pageNum: 1,
					pageSize: 10,
					searchValue: ''
				},
				status: 'loading',
				grabbingItem: {},
				positionSusess: false

			}
		},
		onLoad() {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: async (obj) => {
					let getState = obj.errMsg;
					if (getState == 'getLocation:ok') {
						that.searchParams.lng = obj.longitude;
						that.searchParams.lat = obj.latitude;
						that.getList()
					}
				},
				fail(err) {
					/* if (err.errCode === 3) {
						wx.showModal({
							title: '位置检索超时',
							content: '请检查您的网络连接和定位服务设置，然后重试。',
							showCancel: false,
							success(modalRes) {
								if (modalRes.confirm) {
									wx.getLocation({
										type: 'gcj02',
										geocode: true,
										success(res) {
											that.searchParams.lng = res.longitude;
											that.searchParams.lat = res.latitude;
										},
										fail(err) {
											uni.showToast({
												title:'重新获取位置失败',
												icon:'none'
											})
										}
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: '位置检索失败',
							icon: 'none'
						})
					} */
					//第一次获取失败，第二次再请求
					
					uni.getLocation({
						type: 'gcj02',
						altitude: true,
						success: (obj) => {
							let getState = obj.errMsg;
							if (getState == 'getLocation:ok') {
								that.searchParams.lng = obj.longitude;
								that.searchParams.lat = obj.latitude;
								that.getList()
							}
						},
						fail(err) {
							uni.showModal({
								title: '重要提示!',
								content: '为了提供更精准位置服务，您需要打开手机的定位功能且赋予App使用位置服务的权限！否则将无法正常使用App功能',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										//plus.runtime.quit();
									}
								}
							});
							fUN_AmapLocation.stop({}, result => {
					
							});
						},
					
					});
					
					
				},
				complete: () => {

					
				}
			});


		},
		onReachBottom(e) {
			this.searchParams.pageNum++
			this.getList()
		},
		methods: {
			initSearch() {
				this.status = 'loading'
				this.searchParams.pageNum = 1
				this.pageList = []
				this.getList()
			},
			scrolltolower(e) {
				this.searchParams.pageNum++
				this.getList()
			},
			onPullDownRefresh() {
				this.initSearch()
			},
			gotoDetails() {

			},
			// 获取经纬度
			async getList() {
				if (this.status === 'nomore') return
				//请求任务获取的接口
				const res = await survey.getSurveyTasklist(this.searchParams);
               
				uni.stopPullDownRefresh()
				if (res.data.code == 200) {
					const list = res.data.data.records
					for (let i = 0; i < list.length; i++) {
						let address = list[i].locationAddress;
						if (address != null) {
							if (address.length > 10) {
								address = address.substr(0, 10) + ".."
							}
						} else {
							address = "暂未获取"
						}

						list[i].locationAddress = address
						let m = list[i].distance;
						list[i].distance = '距你 ' + this.setMorKm(m)
					}
					this.pageList = this.pageList.concat(list)
					if (this.pageList.length >= res.data.data.total) {
						this.status = 'nomore'
						return
					} else {
						this.status = 'loading'
					};
				} else {
					if (res.data.code == 403) return uni.redirectTo({
						url: '/pages/login/login',
						success() {
							uni.showToast({
								title: '登录身份异常，请联系管理员!',
								icon: 'none'
							})
							// uni.hideLoading(loadding)
						}
					})
					uni.showToast({
						mask: true,
						icon: 'none',
						title: '数据返回异常！'
					});

				}

			},
			// allItems() {
			// 	// 合并两种状态的数据
			// 	return this.surveyState=="1".concat(this.surveyState=="2");
			// },
			grabbingClick(item) {
				this.grabbingItem = item
				// if (this.allItems.length > 5) {
				// 	this.$refs.uToast.show({
				// 		message: '先去完成勘察任务后再来吧',
				// 		type: "error"
				// 	})
				// }else{
				this.showGrabbing = true
				// }
			},
			async confirmGrab() {
				const {
					id: taskId
				} = this.grabbingItem
				this.showGrabbing = false
				const res = await survey.pickTask({
					taskId
				})
				if (res.data.code != 200) {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: "error"
					})
					uni.startPullDownRefresh()
				} else {
					uni.switchTab({
						url: '/pages/survey/survey',
						success() {
							uni.$emit('refresh')
						}
					})
				}


			},
			setMorKm(m) {
				var n = ''
				if (m) {
					if (m >= 1000) {
						n = (m / 1000).toFixed(2) + 'km'
					} else {
						n = m + 'm'
					}
				} else {
					n = '0m'
				}
				return n
			}
		},
	}
</script>

<style scoped lang="scss">
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.wrapper {
		background-color: #eee;
	}

	.popup {
		padding: 40rpx;
		text-align: center;

		.title {
			font-weight: bold;
			font-size: 32rpx;
		}

		.cue {
			font-size: 26rpx;
			line-height: 1.8;
			color: #666;
			padding: 30rpx 0;
		}

		.button_box {
			@include flexBetween;

			.sure {
				margin-right: 10rpx;
			}
		}

		.button {
			margin-bottom: 20rpx;
		}
	}

	.g_search_wrapper {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;

		.search {
			margin-bottom: 30rpx;
		}

		.space {
			width: 30rpx;
		}

		.end {
			width: 80rpx;
		}

		.select_all {
			display: flex;
		}
	}

	.page_wrapper {
		.item {
			padding: 30rpx 40rpx;
			background-color: #fff;
			margin-bottom: 30rpx;

			.top,
			.mid {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.top_right {
				display: flex;
				justify-content: flex-end;
			}

			.mid {
				.mid_left {
					.mid_left_1 {
						display: flex;
						width: 500rpx;
					}
				}
			}
		}
	}
</style>